<template>
  <!-- weather -->
  <div id="weather-view-he">
    <div class="map-weather">
      <Row>
        <Col :xs="24" :sm="12" :md="12">
          <div class="map-weather-day">
            <p class="map-weather-date">
              <span id="dataInfo">{{info.reportTime.split(' ')[0]}}</span>
              <!-- <span id="weekInfo">湿度{{info.humidity}}%</span> -->
            </p>
            <div class="map-weather-temperature float-l">
              <span id="temperature">{{info.temperature}}℃</span>
            </div>
            <div class="float-l" style="margin:6px 0 0 10px;">
              <div id="weather">{{info.weather}}</div>
              <div id="city">{{info.city}}</div>
            </div>
            <p></p>
          </div>
        </Col>
        <Col :xs="24" :sm="12" :md="12">
          <div class="map-weather-img">
            <component :is="iconName"></component>
          </div>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import Sunny from "./weather-icons/sunny.vue";
import Cloudy from "./weather-icons/cloudy.vue";
import Rainy from "./weather-icons/rainy.vue";
import Snow from "./weather-icons/snow.vue";
import Thunder from "./weather-icons/thunder.vue";
import SunShower from "./weather-icons/sun-shower.vue";
export default {
  name: "weather",
  components: {
    Sunny,
    Cloudy,
    Rainy,
    Snow,
    Thunder,
    SunShower
  },
  data() {
    return {
      info: {
        adcode: "420100",
        city: "武汉市",
        humidity: "98",
        info: "OK",
        province: "湖北",
        reportTime: "2019-10-16 16:13:43",
        temperature: 13,
        weather: "小雨",
        windDirection: "北",
        windPower: 3
      },
      iconName: "Sunny"
    };
  },
  watch: {},
  mounted() {
    let me = this;
    AMap.plugin("AMap.CitySearch", function() {
      var citySearch = new AMap.CitySearch();
      citySearch.getLocalCity(function(status, result) {
        if (status === "complete" && result.info === "OK") {
          console.log(result);
          // 查询成功，result即为当前所在城市信息
          //加载天气查询插件
          AMap.plugin("AMap.Weather", function() {
            //创建天气查询实例
            var weather = new AMap.Weather();

            //执行实时天气信息查询
            weather.getLive(result.adcode, function(err, data) {
              console.log(err, data);
              if (!err) {
                me.info = data;
                if (data.weather.indexOf("多云") != -1) {
                  me.iconName = "Cloudy";
                } else if (data.weather.indexOf("雨") != -1) {
                  me.iconName = "Rainy";
                } else if (data.weather.indexOf("雷") != -1) {
                  me.iconName = "Thunder";
                } else if (data.weather.indexOf("雪") != -1) {
                  me.iconName = "Snow";
                } else if (data.weather.indexOf("晴") != -1) {
                  me.iconName = "Sunny";
                }
              }
            });
          });
        }
      });
    });
  }
};
</script>
<style lang="less" scoped>
.map-weather {
  position: relative;
  width: 100%;
  height: 140px;
  padding: 26px 15px;
  border: 1px solid rgba(123, 148, 183, 0.4);
  border-radius: 2px;
  // background: rgba(107, 127, 156, 0.4);
    background: rgba(0, 0, 0, 0.8);

  .map-weather-day {
    color: #fff;
    margin: 0 auto;
    .map-weather-date {
      font-size: 22px;
      font-family: PingFang-SC-Regular;
    }
    .map-weather-temperature {
      position: relative;
      font-size: 36px;
      font-family: PingFang-SC-Regular;
      font-weight: 100;
    }
  }
  .map-weather-img {

  }
}

</style>


